<template>
	<view class="">
		<view class="item" style="padding: 20rpx;">
			<u-form class="item" style="padding: 0 20rpx 0;" :model="clueInfo" ref="uform" label-width="auto">

				<u-form-item label="客户名称" borderBottom>
					<u-input v-model="clueInfo.customerName" border="none" inputAlign="right" placeholder="请输入客户名称">
					</u-input>
				</u-form-item>

				<u-form-item label="联系人" v-show="showContact" borderBottom>
					<u-input v-model="clueInfo.contact" border="none" inputAlign="right" placeholder="请输入联系人">
					</u-input>
				</u-form-item>

				<u-form-item label="电话" borderBottom>
					<u-input v-model="clueInfo.phone" border="none" inputAlign="right" placeholder="请输入联系电话">
					</u-input>
				</u-form-item>

				<u-form-item label="线索状态" :required="true" @click="pickerShow(1)" borderBottom>
					<u-input v-model="clueInfo.cluesStateStr" disabled disabledColor="#ffffff" border="none"
						inputAlign="right" placeholder="请选择线索状态" type="select">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="跟进方式" :required="true" @click="pickerShow(2)" borderBottom>
					<u-input v-model="clueInfo.followTypeStr" inputAlign="right" disabled disabledColor="#ffffff"
						border="none" placeholder="请选择跟进方式" type="select">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="意向情况" :required="true" @click="pickerShow(3)" borderBottom>
					<u-input v-model="clueInfo.intentionStatusStr" disabled disabledColor="#ffffff" border="none"
						inputAlign="right" placeholder="请选择意向情况" type="select">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="跟进内容" borderBottom>
					<u-input v-model="clueInfo.dealResult" border="none" inputAlign="right" placeholder="请输入跟进内容"
						type="textarea">
					</u-input>
				</u-form-item>

				<u-form-item label="创建时间" borderBottom>
					<u-input v-model="clueInfo.createTime" border="none" inputAlign="right" disabled
						disabledColor="#ffffff">
					</u-input>
				</u-form-item>

				<u-form-item label="最后跟进时间" >
					<u-input v-model="clueInfo.updateTime" border="none" inputAlign="right" disabled
						disabledColor="#ffffff">
					</u-input>
				</u-form-item>

			</u-form>
		</view>

		<view style="height: 100rpx;"></view>

		<view class="button-container">
			<button class="btn-item" @click="commit">提 交</button>
		</view>

		<!-- 线索状态 -->
		<!-- <u-picker :mode="mode" v-model="cluesStatusShow" :default-selector="[0]" :range="cluesStatesList"
			range-key="value" @confirm="pickerConfim()"></u-picker> -->

		<u-picker :show="cluesStatusShow" :columns="cluesStatesList" keyName="value" @confirm="pickerConfim"
			@cancel="cluesStatusShow=false"></u-picker>
		<!-- 跟进方式 -->
		<!-- <u-picker :mode="mode" v-model="followTypeShow" :default-selector="[0]" :range="followTypeList"
			range-key="value" @confirm="pickerConfim()"></u-picker> -->

		<u-picker :show="followTypeShow" :columns="followTypeList" keyName="value" @confirm="pickerConfim"
			@cancel="followTypeShow=false"></u-picker>
		<!-- 意向情况 -->
		<!-- <u-picker :mode="mode" v-model="intentionStatusShow" :default-selector="[0]" :range="intentionStatusList"
			range-key="value" @confirm="pickerConfim()"></u-picker> -->

		<u-picker :show="intentionStatusShow" :columns="intentionStatusList" keyName="value" @confirm="pickerConfim"
			@cancel="intentionStatusShow=false"></u-picker>

		<u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm"
			content="确定提交？" @cancel="showModal=false">
			<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
			<!-- #endif -->
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				mode: 'selector',
				cluesStatusShow: false,
				followTypeShow: false,
				intentionStatusShow: false,
				showContact: Boolean,
				showModal: false,
				clueInfo: {
					cluesId: '',
					customerName: '',
					contact: '',
					phone: '',
					followType: '',
					followTypeStr: '',
					cluesState: '',
					cluesStateStr: '',
					intentionStatus: '',
					intentionStatusStr: '',
					dealResult: '',
					createTime: '',
					updateTime: '',

				}, //线索状态
				cluesStatesList: [
					[{
							code: '1',
							value: '初步接触'
						},
						{
							code: '2',
							value: '潜在客户'
						},
						{
							code: '3',
							value: '持续跟进'
						},
						{
							code: '4',
							value: '忠实客户'
						},
						{
							code: '5',
							value: '无效客户'
						}
					]
				],
				//跟进方式
				followTypeList: [
					[{
							code: '1',
							value: '面谈'
						},
						{
							code: '2',
							value: '电话'
						},
						{
							code: '3',
							value: '微信'
						},
						{
							code: '4',
							value: '短信'
						},
						{
							code: '5',
							value: '邮件'
						},
						{
							code: '6',
							value: 'QQ'
						},
						{
							code: '7',
							value: '其它'
						}
					]
				],

				//意向情况
				intentionStatusList: [
					[{
							code: '1',
							value: '无意向'
						},
						{
							code: '2',
							value: '低意向'
						},
						{
							code: '3',
							value: '中意向'
						},
						{
							code: '4',
							value: '高意向'
						}
					]
				]
			}
		},

		onLoad(op) {
			this.clueInfo.operatorId = this.$store.state.user.userInfo.userId;
			var data = JSON.parse(op.cluesObj); //字符串转对象
			this.clueInfo.cluesId = data.cluesId;
			this.clueInfo.customerName = data.customerName;
			this.clueInfo.phone = data.phone;
			this.clueInfo.contact = data.contact;
			this.clueInfo.cluesState = data.cluesState;
			this.clueInfo.cluesStateStr = data.cluesStateStr;
			this.clueInfo.createTime = data.createTime;
			this.clueInfo.updateTime = data.updateTime;

			this.showContact = data.customerType == 2 ? true : false;
		},

		methods: {
			//是都显示对应的pickerView
			pickerShow(type) {
				this.type = type;
				switch (type) {
					case 1:
						this.cluesStatusShow = true;
						break
					case 2:
						this.followTypeShow = true;
						break
					case 3:
						this.intentionStatusShow = true;
						break
				}
			},
			//picker回调
			pickerConfim(e) {

				if (this.mode == 'time') { //时间格式
					let timeStr = e.year + '-' + e.month + '-' + e.day;

				} else if (this.mode == 'selector') { //自定义格式
					let index = e;
					switch (this.type) {
						case 1: //线索状态
							this.cluesStatusShow = false;
							// let objc1 = this.cluesStatesList[index];
							let objc1 = e.value[0];
							this.clueInfo.cluesState = objc1.code;
							this.clueInfo.cluesStateStr = objc1.value;
							break

						case 2: //跟进方式
							this.followTypeShow = false;
							// let objc2 = this.followTypeList[index];
							let objc2 = e.value[0];
							this.clueInfo.followType = objc2.code;
							this.clueInfo.followTypeStr = objc2.value;
							break

						case 3: //意向情况
							this.intentionStatusShow = false;
							// let objc3 = this.intentionStatusList[index];
							let objc3 = e.value[0];
							this.clueInfo.intentionStatus = objc3.code;
							this.clueInfo.intentionStatusStr = objc3.value;
							break
					}
				}
			},

			commit() {
				// this.showModal = true;
				this.confirm()

			},
			confirm() {
				let that = this

				if (this.$u.test.isEmpty(this.clueInfo.cluesStateStr)) {
					this.$u.toast('请选择线索状态');
					return;
				} else if (this.$u.test.isEmpty(this.clueInfo.followTypeStr)) {
					this.$u.toast('请选跟进方式');
					return;
				} else if (this.$u.test.isEmpty(this.clueInfo.intentionStatusStr)) {
					this.$u.toast('请选择意向情况');
					return;
				} else {

					uni.showModal({
						content: '确定提交吗?',
						success(result) {
							if (result.confirm) {
								that.$u.api.updateClues({
									cluesId: that.clueInfo.cluesId,
									cluesDeal: {
										followType: that.clueInfo.followType,
										cluesStatus: that.clueInfo.cluesState,
										intentionStatus: that.clueInfo.intentionStatus,
										dealResult: that.clueInfo.dealResult
									}

								}).then(
									res => {
										that.$u.toast('提交成功');
										uni.$emit('refreshClueList', true)
										//获取所有页面的栈实例列表
										let pages = getCurrentPages();
										//上个页面
										let prevPage = pages[pages.length - 2];
										prevPage.$vm.updateClueList();
										setTimeout(()=>{
											uni.navigateBack();
										}, 1000)
									}
								);
							}
						}
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
